<template>
  <div class="view">
    <div class="worldShowArea" ref="worldShowArea">
      <div
        class="worldArea"
        :style="`transform: scale(${1 / system.visualLevel});`"
      >
        <div
          class="worldContent"
          :style="`
            transform: translate(${-player.x * 50}px, ${-player.y * 50}px);
            left: ${1200 / 2 - (areaBlockDiameter * 50) / 2}px;
            top: ${
              (600 * system.visualLevel) / 2 - (areaBlockDiameter * 50) / 2
            }px;
          `"
        >
          <World>
            <Player>
              <AttackingWeapons />
            </Player>
          </World>
        </div>
      </div>
    </div>

    <div class="inventoryShowArea">
      <Inventory />
    </div>

    <GameInfo />
    <MaskLayer />
    <Bag />
  </div>
</template>

<script>
import World from "@/components/world/World.vue";
import { mapState } from "vuex";
import { getDebounce } from "@/util/common.js";
import { getWeaponById } from "@/util/weapon.js";

import Player from "@/components/player/Player.vue";
import GameInfo from "@/components/GameInfo.vue";
import Inventory from "@/components/player/Inventory.vue";
import Bag from "@/components/player/Bag.vue";
import MaskLayer from "@/components/MaskLayer.vue";
import AttackingWeapons from "@/components/player/AttackingWeapons.vue";

export default {
  components: {
    World,
    Player,
    GameInfo,
    Inventory,
    Bag,
    MaskLayer,
    AttackingWeapons,
  },
  computed: {
    ...mapState("map", ["player", "system"]),
    areaBlockDiameter() {
      return this.$store.state.map.system.areaBlockDiameter;
    },
  },
  mounted() {
    this.$store.dispatch("map/addInventory", { id: 1, count: 1 });
    this.$store.dispatch("map/addInventory", { id: 2, count: 1 });
    this.$store.dispatch("map/addInventory", { id: 3, count: 16 });

    // 每秒时间增加5分钟
    setInterval(() => {
      this.$store.state.map.mapTime += 5;
    }, 1000);

    const l = this.$refs.worldShowArea.offsetWidth;
    const h = this.$refs.worldShowArea.offsetHeight;

    const pointAngleDeBounce = getDebounce(100);

    this.$refs.worldShowArea.addEventListener("mousemove", (e) => {
      pointAngleDeBounce(() => {
        let pageX = e.clientX;
        let pageY = e.clientY;

        // 获取元素相对于整个页面的位置
        let rect = this.$refs.worldShowArea.getBoundingClientRect();
        let elementX = rect.left + window.scrollX;
        let elementY = rect.top + window.scrollY;

        // 计算鼠标在元素上的位置
        let x = pageX - elementX;
        let y = pageY - elementY;

        let angle = this.calculateRotationAngle(x, y, l / 2, h / 2);
        this.$store.state.map.player.pointAngle = parseInt(angle);
      });
    });

    this.$refs.worldShowArea.addEventListener("click", (e) => {
      if (this.player.showBag) return;

      // this.$store.dispatch("map/playerAttack");
      this.$store.state.map.player.attacking = true;

      let weapon = getWeaponById(
        this.player.inventory[this.player.currentInventoryIndex].id
      );
      setTimeout(() => {
        this.$store.state.map.player.attacking = false;
      }, weapon.attackTime);
    });
  },
  methods: {
    calculateRotationAngle(x1, y1, x2, y2) {
      // 计算两点之间的差值，即向量
      var dx = x1 - x2;
      var dy = y1 - y2;

      // 使用Math.atan2计算角度，返回值是弧度
      // Math.atan2返回的是从x轴正方向到点(x, y)的向量与x轴正方向之间的角度
      // 这个角度是以弧度表示的，且范围为(-π, π]
      var radians = Math.atan2(dy, dx);

      // 将弧度转换为度
      var degrees = radians * (180 / Math.PI);

      // 将角度转换为0-360度范围
      // 如果degrees是负值，意味着点(x1, y1)在点(x2, y2)的顺时针方向
      if (degrees < 0) {
        degrees += 360;
      }

      return degrees;
    },
  },
};
</script>

<style scoped>
.view {
  width: 100vw;
  height: 100vh;
  background: #000;
}

.worldArea {
  transform-origin: center center;
  transition: all ease-out 500ms;
}

.worldShowArea {
  position: absolute;
  width: 1200px;
  height: 600px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.1);
  /* border-radius: 50%; */
  border-radius: 30px;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* .worldShowArea::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: repeating-radial-gradient(
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 65%,
    rgba(0, 0, 0, 0.8) 70%,
    rgb(0, 0, 0) 75%,
    rgb(0, 0, 0) 100%
  );
} */
.worldContent {
  position: absolute;
  transition: all ease-out 500ms;
}

.inventoryShowArea {
  position: absolute;
  width: auto;
  height: 80px;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
}
</style>